<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <title>Chatbot With Me</title>
  <link rel="stylesheet" type="text/css" href="static/style.css">
</head>

<body>
  <div class="container">

    <div class="header">
      <h1>Chat With Me</h1>
      <div id="clock" class="clock">00:00:00</div>
    </div>
    <div id="chatbox">
      <div class="user-message">
        <div class="chat-message user" >Hello, Chatbot!</div>
        <div class="message-time" id="time1"> 00:00:00 </div>
      </div>
      <div class="bot-message">
        <div class="chat-message chatbot">Hi there, how can I help you today?</div>
        <div class="message-time" id="time2">00:00:00</div>
      </div>
    </div>
    
    <form id="input-form">
      <input type="text" id="input-field" placeholder="Type a message...">
      <button type="submit" id="submit-button">Send</button>
      <button id="export-button">Export Chat History</button>
      <!-- <button id="save-button">Save Chat History</button> -->
    </form>
  </div>
</body>

</html>



<script type="text/javascript" src="static/script.js"></script>


